<template>
  <div>
    <Header v-if="shows == 'list'">
      <el-button
        size="small"
        @click="
          shows = 'form';
          addressMsg = {};
        "
      >
        新建地址
      </el-button>
      <Alert :txt="`已添加${totals}个，最多可创建20个地址`" />
    </Header>

    <Main v-if="shows == 'list'" :data="listData" :footer-lock="false">
      <!-- <el-table-column width="30" type="selection"></el-table-column> -->
      <el-table-column label="联系人" align="center" property="name">
      </el-table-column>
      <el-table-column
        label="地址"
        align="center"
        property="address"
      ></el-table-column>
      <el-table-column
        label="联系电话"
        align="center"
        property="phone"
      ></el-table-column>
      <el-table-column
        label="邮编"
        align="center"
        property="postal_code"
      ></el-table-column>
      <el-table-column label="默认设置" align="center">
        <template slot-scope="scope">
          <el-button
            v-if="scope.row.is_default_send == 1"
            type="primary"
            size="mini"
            >发货地址</el-button
          >
          <el-button
            v-else
            size="mini"
            @click="editStatusTag('发货地址', scope.row)"
            >发货地址</el-button
          >
          <el-button
            v-if="scope.row.is_default_recieve == 1"
            type="primary"
            size="mini"
            >退货地址</el-button
          >
          <el-button
            v-else
            size="mini"
            @click="editStatusTag('退货地址', scope.row)"
            >退货地址</el-button
          >
        </template>
      </el-table-column>

      <el-table-column
        label="操作"
        align="center"
        fixed="right"
        class-name="tableoperation"
      >
        <template slot-scope="scope">
          <el-button size="mini" type="text" @click="edit(scope.row)">
            编辑
          </el-button>
          <el-button
            size="mini"
            type="text"
            @click="del(scope.row.address_id, scope.row.is_default_send)"
          >
            删除
          </el-button>
        </template>
      </el-table-column>

      <!-- <Footer>
        <el-pagination
          :page-size="10"
          layout="prev, pager, next"
          :total="totals"
          @current-change="changes"
        >
        </el-pagination>
      </Footer> -->
    </Main>
    <address-library-form
      v-if="shows == 'form'"
      :address-msg="addressMsg"
      @out="out"
    />
  </div>
</template>
<script>
import { ADDRESSDEPOTLIST, SETDEFAULTSR, DELADDRESSDEPOT } from "../service";

export default {
  components: {
    addressLibraryForm: () => import("./form")
  },
  data() {
    return {
      shows: "list",
      listData: [],
      totals: 0,
      pages: 1,
      addressMsg: {}
    };
  },
  created() {
    this.getList();
  },
  methods: {
    async editStatusTag(name, e) {
      let obj = {};
      if (name === "发货地址") {
        obj = {
          address_id: e.address_id,
          is_default_send: 1,
          longitude: e.longitude,
          latitude: e.latitude
        };
      } else {
        obj = {
          address_id: e.address_id,
          is_default_recieve: 1
        };
      }
      await SETDEFAULTSR(obj).then(res => {
        let { code, msg } = res;
        if (code === 200) this.getList();
        this.$message({
          message: msg,
          type: code === 200 ? "success" : "error"
        });
      });
    },
    async del(addressId, isDefaultSend) {
      await this.$confirm("是否删除?", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning"
      })
        .then(() => {
          DELADDRESSDEPOT({
            address_id: addressId,
            is_default_send: isDefaultSend
          }).then(res => {
            let { code, msg } = res;
            if (code === 200) this.getList();
            this.$message({
              message: msg,
              type: code === 200 ? "success" : "error"
            });
          });
        })
        .catch(() => {
          this.$message({
            type: "info",
            message: "已取消删除!"
          });
        });
    },
    edit(e) {
      this.addressMsg = e;
      this.shows = "form";
    },

    async getList() {
      await ADDRESSDEPOTLIST({
        page: this.pages,
        pageshow: 20
      }).then(res => {
        let { code, data, msg } = res;
        if (code === 200) {
          this.totals = data.count;
          this.listData = data.list;
        } else {
          this.listData = [];
          this.$message.error(msg);
        }
      });
    },
    changes(page) {
      this.pages = page;
      this.getList();
    },
    out() {
      this.shows = "list";
      this.getList();
    }
  }
};
</script>
<style lang="scss" scoped></style>
